<template>
  <div class="file-transfer">
    <Header />
    
    <main class="main-content">
      <div class="container">
        <div class="page-header">
          <h1 class="page-title">🚀 文件速递</h1>
          <p class="page-desc">快速传输临时文件，支持次数和时间限制</p>
        </div>
        
        <!-- 功能菜单 -->
        <div class="transfer-tabs">
          <button 
            :class="['tab-btn', { active: activeTab === 'upload' }]"
            @click="activeTab = 'upload'; clearUploadResult()"
          >
            📤 上传文件
          </button>
          <button 
            :class="['tab-btn', { active: activeTab === 'download' }]"
            @click="activeTab = 'download'; clearQueryResult()"
          >
            📥 查询下载
          </button>
        </div>
        
        <!-- 内容区域 -->
        <div class="transfer-content">
          <!-- 上传文件区域 -->
          <div v-show="activeTab === 'upload'" class="upload-section card">
            <h2 class="section-title">📤 上传文件</h2>
            
            <!-- 文件上传区域 -->
            <div class="form-group">
              <label>选择文件：</label>
              <div 
                :class="['file-upload-area', { 'has-file': selectedFile, 'dragging': isDragging, 'file-too-large': fileTooLarge }]"
                @click="triggerFileInput"
                @dragover.prevent="isDragging = true"
                @dragleave.prevent="isDragging = false"
                @drop.prevent="handleDrop"
              >
                <input 
                  type="file" 
                  ref="fileInput"
                  @change="handleFileChange"
                  :disabled="uploading"
                  style="display: none;"
                />
                
                <div v-if="!selectedFile" class="upload-placeholder">
                  <div class="upload-icon">📁</div>
                  <p class="upload-text">点击选择文件或拖拽到此处</p>
                  <p class="upload-hint">文件大小不超过 50MB</p>
                </div>
                
                <div v-else class="file-selected">
                  <div class="file-icon-preview">{{ getFileIcon(selectedFile.name.split('.').pop()) }}</div>
                  <div class="file-info">
                    <p class="file-name-display">{{ selectedFile.name }}</p>
                    <p class="file-size-display">{{ formatFileSize(selectedFile.size) }}</p>
                    <p v-if="fileTooLarge" class="error-hint">⚠️ 文件超过50MB限制</p>
                  </div>
                  <button 
                    class="remove-file-btn" 
                    @click.stop="removeFile"
                    :disabled="uploading"
                  >
                    ✕
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 限制类型选择 -->
            <div class="form-group">
              <label>传输限制：</label>
              <div class="limit-type-cards">
                <div 
                  :class="['limit-card', { active: uploadType === '0' }]"
                  @click="uploadType = '0'"
                >
                  <div class="card-icon">📊</div>
                  <div class="card-title">按下载次数</div>
                  <div class="card-desc">限制下载次数后失效</div>
                </div>
                <div 
                  :class="['limit-card', { active: uploadType === '1' }]"
                  @click="uploadType = '1'"
                >
                  <div class="card-icon">⏰</div>
                  <div class="card-title">按过期时间</div>
                  <div class="card-desc">指定时间后自动失效</div>
                </div>
              </div>
            </div>
            
            <!-- 限制参数选择 -->
            <div v-if="uploadType === '0'" class="form-group">
              <label>下载次数：</label>
              <div class="options-grid">
                <div 
                  v-for="count in [1, 3, 5, 7, 10, 14]" 
                  :key="count"
                  :class="['option-item', { active: maxCount === String(count) }]"
                  @click="maxCount = String(count)"
                >
                  {{ count }}次
                </div>
              </div>
            </div>
            
            <div v-if="uploadType === '1'" class="form-group">
              <label>有效期限：</label>
              <div class="options-grid">
                <div 
                  v-for="day in [1, 3, 5, 7, 10, 14]" 
                  :key="day"
                  :class="['option-item', { active: expireDays === String(day) }]"
                  @click="expireDays = String(day)"
                >
                  {{ day }}天
                </div>
              </div>
            </div>
            
            <div class="upload-progress" v-if="uploading">
              <div class="loading"></div>
              <p>上传中...</p>
            </div>
            
            <button 
              class="btn btn-primary btn-block btn-large" 
              @click="uploadFile"
              :disabled="!selectedFile || uploading || fileTooLarge"
            >
              <span v-if="uploading">⏳ 上传中...</span>
              <span v-else-if="fileTooLarge">❌ 文件过大</span>
              <span v-else>📤 上传文件</span>
            </button>
            
            <!-- 上传成功后显示文件码 -->
            <div v-if="fileCode" class="success-result">
              <div class="message message-success">
                文件上传成功！
              </div>
              <div class="code-display">
                <label>文件码：</label>
                <div class="code-value">{{ fileCode }}</div>
                <button class="btn btn-primary btn-block" @click="copyCode">
                  📋 复制文件码
                </button>
              </div>
              <p class="help-text">请妥善保管文件码，用于查询和下载文件</p>
            </div>
          </div>
          
          <!-- 查询文件区域 -->
          <div v-show="activeTab === 'download'" class="query-section card">
            <h2 class="section-title">📥 查询下载</h2>
            
            <div class="form-group">
              <label>文件码：</label>
              <div class="input-with-button">
                <input 
                  type="text" 
                  class="input input-code" 
                  v-model="queryCode"
                  placeholder="请输入文件码"
                  @keyup.enter="queryFile"
                  :disabled="querying"
                />
                <button 
                  class="btn btn-primary" 
                  @click="queryFile"
                  :disabled="!queryCode || querying"
                >
                  <span v-if="querying">⏳ 查询中...</span>
                  <span v-else>🔍 查询</span>
                </button>
              </div>
            </div>
            
            <div v-if="queriedFile" class="file-result-card">
              <!-- 文件信息展示 -->
              <div class="result-header">
                <div class="file-icon-display">{{ getFileIcon(queriedFile.extension) }}</div>
                <div class="file-main-info">
                  <h3 class="result-file-name">{{ queriedFile.oriName }}</h3>
                  <p class="result-file-size">{{ formatFileSize(queriedFile.fileSize) }}</p>
                </div>
              </div>
              
              <!-- 详细信息 -->
              <div class="result-details">
                <div class="info-row">
                  <span class="info-label">文件类型</span>
                  <span class="info-value">{{ queriedFile.extension || '未知' }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">上传时间</span>
                  <span class="info-value">{{ formatDateTime(queriedFile.uploadTime) }}</span>
                </div>
                <div v-if="queriedFile.type === 0" class="info-row">
                  <span class="info-label">下载限制</span>
                  <span class="info-value">
                    {{ queriedFile.currentCount }} / {{ queriedFile.maxCount }} 次
                    <span v-if="queriedFile.currentCount >= queriedFile.maxCount" class="expired-badge">已用尽</span>
                  </span>
                </div>
                <div v-if="queriedFile.type === 1" class="info-row">
                  <span class="info-label">过期时间</span>
                  <span class="info-value">{{ formatDateTime(queriedFile.expireTime) }}</span>
                </div>
              </div>
              
              <!-- 下载按钮 -->
              <div class="result-actions">
                <button 
                  class="btn btn-success btn-block btn-large" 
                  @click="downloadFile"
                  :disabled="downloading || isFileExpired"
                >
                  <span v-if="downloading">⏳ 下载中...</span>
                  <span v-else-if="isFileExpired">❌ 无法下载</span>
                  <span v-else>⬇️ 下载文件</span>
                </button>
                
                <button 
                  class="btn btn-block" 
                  @click="clearQueryResult"
                >
                  🔄 查询其他文件
                </button>
              </div>
              
              <!-- 警告提示 -->
              <div v-if="isFileExpired" class="warning-notice">
                <div class="notice-icon">⚠️</div>
                <div class="notice-text">
                  <span v-if="queriedFile.type === 0">此文件下载次数已用尽</span>
                  <span v-else>此文件已过期</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    
    <Footer />
    <Message ref="message" />
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import Message from '@/components/Message.vue'
import { uploadFile, getFileByCode, downloadFile as downloadFileApi } from '@/api/file'
import { formatFileSize, getFileIcon, formatDateTime } from '@/utils/format'

const MAX_FILE_SIZE = 50 * 1024 * 1024 // 50MB

export default {
  name: 'FileTransfer',
  components: {
    Header,
    Footer,
    Message
  },
  data() {
    return {
      activeTab: 'upload', // 'upload' 或 'download'
      
      selectedFile: null,
      uploadType: '0', // 0: 按次数, 1: 按时间
      maxCount: '3',
      expireDays: '3',
      uploading: false,
      fileCode: '',
      isDragging: false, // 是否正在拖拽文件
      
      queryCode: '',
      querying: false,
      queriedFile: null,
      downloading: false // 是否正在下载
    }
  },
  computed: {
    fileTooLarge() {
      return this.selectedFile && this.selectedFile.size > MAX_FILE_SIZE
    },
    isFileExpired() {
      if (!this.queriedFile) return false
      
      // 检查是否下载次数已用尽
      if (this.queriedFile.type === 0) {
        return this.queriedFile.currentCount >= this.queriedFile.maxCount
      }
      
      // 检查是否过期
      if (this.queriedFile.type === 1 && this.queriedFile.expireTime) {
        const expireTime = new Date(this.queriedFile.expireTime).getTime()
        return Date.now() > expireTime
      }
      
      return false
    }
  },
  methods: {
    formatFileSize,
    getFileIcon,
    formatDateTime,
    
    triggerFileInput() {
      if (!this.uploading) {
        this.$refs.fileInput.click()
      }
    },
    
    handleFileChange(event) {
      const file = event.target.files[0]
      if (file) {
        this.selectedFile = file
        this.isDragging = false
        this.fileCode = '' // 清除之前的文件码
        
        if (file.size > MAX_FILE_SIZE) {
          this.$refs.message.show({
            type: 'error',
            message: '文件大小不能超过 50MB'
          })
        }
      }
    },
    
    handleDrop(event) {
      this.isDragging = false
      
      if (this.uploading) return
      
      const files = event.dataTransfer.files
      if (files.length > 0) {
        this.selectedFile = files[0]
        this.fileCode = ''
        
        // 更新 input 的 files
        const dataTransfer = new DataTransfer()
        dataTransfer.items.add(files[0])
        this.$refs.fileInput.files = dataTransfer.files
        
        if (this.selectedFile.size > MAX_FILE_SIZE) {
          this.$refs.message.show({
            type: 'error',
            message: '文件大小不能超过 50MB'
          })
        }
      }
    },
    
    removeFile() {
      if (!this.uploading) {
        this.selectedFile = null
        this.fileCode = ''
        this.$refs.fileInput.value = ''
      }
    },
    
    async uploadFile() {
      if (!this.selectedFile) {
        this.$refs.message.show({
          type: 'warning',
          message: '请选择文件'
        })
        return
      }
      
      if (this.fileTooLarge) {
        this.$refs.message.show({
          type: 'error',
          message: '文件大小不能超过 50MB'
        })
        return
      }
      
      this.uploading = true
      
      try {
        const formData = new FormData()
        formData.append('file', this.selectedFile)
        formData.append('type', this.uploadType)
        
        if (this.uploadType === '0') {
          formData.append('maxCount', this.maxCount)
        } else {
          // 计算过期时间
          const expireTime = new Date()
          expireTime.setDate(expireTime.getDate() + parseInt(this.expireDays))
          const timeStr = this.formatExpireTime(expireTime)
          formData.append('expireTime', timeStr)
        }
        
        const response = await uploadFile(formData)
        
        if (response.data.code === '0') {
          this.fileCode = response.data.data
          this.$refs.message.show({
            type: 'success',
            message: '文件上传成功'
          })
        } else {
          this.$refs.message.show({
            type: 'error',
            message: response.data.msg || '文件上传失败'
          })
        }
      } catch (error) {
        this.$refs.message.show({
          type: 'error',
          message: '文件上传失败：' + error.message
        })
      } finally {
        this.uploading = false
      }
    },
    
    formatExpireTime(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    
    copyCode() {
      navigator.clipboard.writeText(this.fileCode).then(() => {
        this.$refs.message.show({
          type: 'success',
          message: '文件码已复制到剪贴板'
        })
      })
    },
    
    async queryFile() {
      if (!this.queryCode) {
        this.$refs.message.show({
          type: 'warning',
          message: '请输入文件码'
        })
        return
      }
      
      this.querying = true
      this.queriedFile = null
      
      try {
        const response = await getFileByCode(this.queryCode)
        
        if (response.data.code === '0') {
          // 检查 data 是否为 null
          if (response.data.data === null || response.data.data === undefined) {
            this.$refs.message.show({
              type: 'warning',
              message: '文件下载次数已用尽或文件已过期'
            })
            return
          }
          
          this.queriedFile = response.data.data
          this.$refs.message.show({
            type: 'success',
            message: '文件查询成功'
          })
        } else {
          this.$refs.message.show({
            type: 'error',
            message: response.data.msg || '文件不存在或已过期'
          })
        }
      } catch (error) {
        this.$refs.message.show({
          type: 'error',
          message: '文件查询失败：' + error.message
        })
      } finally {
        this.querying = false
      }
    },
    
    async downloadFile() {
      if (!this.queriedFile || this.downloading || this.isFileExpired) return
      
      this.downloading = true
      
      try {
        const response = await downloadFileApi(this.queriedFile.id)
        
        // 创建下载链接
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', this.queriedFile.oriName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
        
        this.$refs.message.show({
          type: 'success',
          message: '文件下载成功'
        })
        
        // 下载后不重新查询，只更新显示的次数
        if (this.queriedFile.type === 0) {
          this.queriedFile.currentCount++
        }
      } catch (error) {
        this.$refs.message.show({
          type: 'error',
          message: '文件下载失败：' + error.message
        })
      } finally {
        this.downloading = false
      }
    },
    
    clearUploadResult() {
      // 切换到上传标签时清除上传结果
      this.fileCode = ''
      this.isDragging = false
    },
    
    clearQueryResult() {
      // 切换到下载标签时清除查询结果
      this.queriedFile = null
    }
  }
}
</script>

<style scoped>
.file-transfer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 40px 0 80px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}

.page-desc {
  font-size: 16px;
  color: var(--text-secondary);
}

/* 功能菜单标签页 */
.transfer-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0;
}

.transfer-tabs .tab-btn {
  flex: 1;
  padding: 16px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.transfer-tabs .tab-btn:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

.transfer-tabs .tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  background-color: rgba(66, 184, 131, 0.05);
}

/* 内容区域 */
.transfer-content {
  max-width: 600px;
  margin: 0 auto;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.help-text {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.file-preview {
  padding: 16px;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
  margin-bottom: 16px;
}

.file-preview p {
  margin: 8px 0;
}

.radio-group {
  display: flex;
  gap: 24px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  cursor: pointer;
}

.upload-progress {
  text-align: center;
  padding: 20px;
}

.upload-progress p {
  margin-top: 12px;
  color: var(--text-secondary);
}

.success-result {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid var(--border-color);
}

.code-display {
  margin-top: 16px;
}

.code-display label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.code-value {
  padding: 16px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: monospace;
  font-size: 18px;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 12px;
  word-break: break-all;
}

.file-info-card {
  margin-top: 24px;
  padding: 24px;
  background-color: var(--bg-tertiary);
  border-radius: 8px;
}

.file-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.file-icon-large {
  font-size: 64px;
  margin-bottom: 12px;
}

.file-name {
  font-size: 18px;
  font-weight: 600;
  word-break: break-word;
}

.file-details {
  margin-bottom: 20px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item label {
  color: var(--text-secondary);
  font-weight: 500;
}

.detail-item span {
  color: var(--text-primary);
}

/* 文件上传区域样式 */
.file-upload-area {
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--bg-primary);
  position: relative;
}

.file-upload-area:hover {
  border-color: var(--primary-color);
  background-color: rgba(66, 184, 131, 0.05);
}

.file-upload-area.dragging {
  border-color: var(--primary-color);
  background-color: rgba(66, 184, 131, 0.1);
  transform: scale(1.02);
}

.file-upload-area.file-too-large {
  border-color: var(--danger-color);
  background-color: rgba(218, 54, 51, 0.05);
}

.file-upload-area.has-file {
  border-style: solid;
  padding: 20px;
}

.upload-placeholder {
  pointer-events: none;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.8;
}

.upload-text {
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 500;
}

.upload-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.file-selected {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
}

.file-icon-preview {
  font-size: 40px;
  flex-shrink: 0;
}

.file-info {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.file-name-display {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  word-break: break-all;
}

.file-size-display {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.error-hint {
  font-size: 12px;
  color: var(--danger-color);
  margin: 4px 0 0 0;
}

.remove-file-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.remove-file-btn:hover:not(:disabled) {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
  color: white;
  transform: rotate(90deg);
}

.remove-file-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 拖拽时的动画 */
.file-upload-area.dragging .upload-icon {
  animation: bounce 0.6s ease infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 限制类型卡片 */
.limit-type-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.limit-card {
  padding: 20px 16px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.limit-card:hover {
  border-color: var(--primary-color);
  background-color: rgba(66, 184, 131, 0.05);
  transform: translateY(-2px);
}

.limit-card.active {
  border-color: var(--primary-color);
  background-color: rgba(66, 184, 131, 0.1);
  box-shadow: 0 4px 12px rgba(66, 184, 131, 0.2);
}

.card-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.card-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

/* 选项网格 */
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.option-item {
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
}

.option-item:hover {
  border-color: var(--primary-color);
  background-color: rgba(66, 184, 131, 0.05);
}

.option-item.active {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, rgba(66, 184, 131, 0.2) 0%, rgba(53, 163, 114, 0.2) 100%);
  color: var(--primary-color);
  font-weight: 600;
}

/* 查询下载表单优化 */
.input-with-button {
  display: flex;
  gap: 12px;
}

.input-code {
  flex: 1;
}

.file-result-card {
  margin-top: 24px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(66, 184, 131, 0.05) 0%, rgba(88, 166, 255, 0.05) 100%);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.result-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 20px;
}

.file-icon-display {
  font-size: 56px;
  flex-shrink: 0;
}

.file-main-info {
  flex: 1;
  min-width: 0;
}

.result-file-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text-primary);
  word-break: break-all;
}

.result-file-size {
  font-size: 16px;
  color: var(--primary-color);
  margin: 0;
  font-weight: 500;
}

.result-details {
  margin-bottom: 24px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background-color: var(--bg-secondary);
  border-radius: 6px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}

.info-row:hover {
  background-color: var(--bg-tertiary);
  transform: translateX(4px);
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.info-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
}

.expired-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background-color: rgba(218, 54, 51, 0.2);
  color: var(--danger-color);
  border-radius: 4px;
  font-size: 12px;
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.warning-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: rgba(210, 153, 34, 0.1);
  border: 1px solid var(--warning-color);
  border-left: 4px solid var(--warning-color);
  border-radius: 6px;
  margin-top: 16px;
}

.notice-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.notice-text {
  color: var(--warning-color);
  font-weight: 500;
  font-size: 14px;
}

@media (max-width: 768px) {
  .transfer-tabs .tab-btn {
    font-size: 14px;
    padding: 12px 16px;
  }
  
  .transfer-content {
    max-width: 100%;
  }
  
  .page-title {
    font-size: 28px;
  }
  
  .limit-type-cards {
    grid-template-columns: 1fr;
  }
  
  .options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .result-header {
    flex-direction: column;
    text-align: center;
  }
  
  .file-icon-display {
    font-size: 48px;
  }
  
  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .info-value {
    text-align: left;
  }
  
  .input-with-button {
    flex-direction: column;
  }
}
</style>

